<template>
  <div>
    <div v-if="otherParam.showA">测试</div>
    <button @click="buttonClick1">按钮1</button>
    <button @click="buttonClick">按钮</button>
  </div>
</template>

<script>
import {nextTick, reactive} from "vue";

export default {
  name: "index",
  setup() {
    let otherParam = reactive({
      showA: false
    })
    // dom数据更新之后立即使用
    nextTick(() => {
      otherParam.showA = true
    })

    // 表明函数是异步执行
    async function sayHello(num) {
      return "hello:" + num
    }

    function buttonClick() {
      sayHello("1").then(res => {
        console.log(res)
      })
      console.log("虽然我在后边，但是我先执行")
    }

    // async：异步函数，返回的是一个Promise对象，可以使用then方法添加回调函数。
    // await：对紧跟在await后面的表达式，需要等待它的结果，其完成后再接着执行后面的语句。
    // await关键字只能放在async函数里，await配合async一起使用
    async function buttonClick1() {
      await sayHello("1").then(res => {
        console.log(res)
      })
      console.log("我在后边，最后执行")
    }

    return {
      otherParam,
      buttonClick,
      buttonClick1
    }
  }
}
</script>

<style scoped>

</style>
